<route lang="json5" type="voyage">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '航次列表',
  },
}
</route>
<template>
  <view class="voyage_container">
    <view class="title_box">
      <img src="../../static/images/ic_voyage_tab_back.png" />
      <text>{{ t('home.homeBoatTask') }}</text>
    </view>
    <view class="search_box">
      <wd-input
        prefix-icon="search"
        type="text"
        v-model="value"
        :placeholder="t('voyage.voyageSearchHint')"
        @change="handleChange"
      />
      <text>{{ t('voyage.searchBtn') }}</text>
    </view>
    <view class="tabbar_box">
      <text :class="currentTab === '预抵港' ? 'active' : ''" @click="tabClick('预抵港')">
        {{ t('voyage.statusArriving') }}
      </text>
      <text :class="currentTab === '锚地' ? 'active' : ''" @click="tabClick('锚地')">
        {{ t('voyage.statusAnchored') }}
      </text>
      <text :class="currentTab === '泊位' ? 'active' : ''" @click="tabClick('泊位')">
        {{ t('voyage.statusBerthed') }}
      </text>
      <text :class="currentTab === '已离港' ? 'active' : ''" @click="tabClick('已离港')">
        {{ t('voyage.statusDepartured') }}
      </text>
    </view>
    <view class="list_box">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="first_row">
          <img src="../../static/images/ic_voyage_tab_ship.png" />
          <view class="right_box">
            <text>{{ item.voyage }}</text>
            <text>
              {{ t('service.expected') }}{{ item.date }}{{ t('service.address') }}{{ item.arrival }}
            </text>
            <text>
              {{ t('voyage.importBoxNum') }} {{ item.num1 }}&nbsp;&nbsp;&nbsp;&nbsp;{{
                t('voyage.exportBoxNum')
              }}
              {{ item.num2 }}
            </text>
          </view>
        </view>
        <view class="second_row">
          <view>{{ t('voyage.vBtnShipPosition') }}</view>
        </view>
        <view class="right_status">{{ item.status }}</view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
defineOptions({
  name: 'Notice',
})
// 获取屏幕边界到安全区域距离
// const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
// onload(() => {})
const value = ref('')
function handleChange(event) {
  console.log(event)
}
// 当前所在tab值
const currentTab = ref('预抵港')
// 点击tab栏触发事件
const tabClick = (val) => {
  currentTab.value = val
}
const dataList = reactive([
  {
    voyage: 'EVA USUKI 2405/',
    date: '2024-10-21 00:00:00',
    arrival: 'Nantong',
    num1: '10000TEU',
    num2: '11000TEU',
    status: '预抵港',
  },
  {
    voyage: 'EVA USUKI 2405/',
    date: '2024-10-21 00:00:00',
    arrival: 'Nantong',
    num1: '10000TEU',
    num2: '11000TEU',
    status: '预抵港',
  },
])
</script>
<style lang="scss" scoped>
.voyage_container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f8f9fb;
  .title_box {
    position: relative;
    width: 100vw;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #295699;

    img {
      position: absolute;
      top: 50%;
      left: 30rpx;
      width: 26rpx;
      transform: translateY(-50%);
    }
    text {
      color: #fff;
    }
  }
  .search_box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100vw;
    padding: 16rpx 22rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    .wd-input {
      flex: 1;
      padding: 0 30rpx;
      background-color: #f3f3f3 !important;
      border: none;
      border-radius: 32px;
      ::v-deep .uni-input-placeholder {
        color: #868686;
      }
      ::v-deep .wd-input__icon {
        vertical-align: top;
        background-color: #f3f3f3 !important;
      }
      &::after {
        height: 0;
      }
    }
    text {
      margin-left: 16rpx;
      font-size: 26rpx;
      color: #616161;
    }
  }
  .tabbar_box {
    box-sizing: border-box;
    display: flex;
    width: 100vw;
    text-align: center;
    background-color: #fff;
    text {
      flex: 1;
      padding-top: 22rpx;
      padding-bottom: 16rpx;
      font-size: 26rpx;
    }
    .active {
      color: #204073;
      border-bottom: 4rpx solid #204073;
    }
  }
  .list_box {
    padding: 0 30rpx;
    background-color: #f6fafd;
    .item {
      position: relative;
      margin-bottom: 12rpx;
      background-color: #fff;
      border: 2rpx solid #e8eae9;
      .first_row {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 30rpx 20rpx 6rpx;
        border-bottom: 2rpx solid #f8f8f8;
        img {
          height: 60rpx;
          margin-right: 24rpx;
        }
        .right_box {
          display: flex;
          flex-direction: column;
          text {
            margin-bottom: 4rpx;
            &:nth-child(1) {
              font-size: 30rpx;
              color: #343434;
            }
            &:nth-child(2) {
              font-size: 20rpx;
              color: #a1a1a1;
            }
            &:nth-child(3) {
              font-size: 22rpx;
              color: #7f7f7f;
            }
          }
        }
      }
      .second_row {
        display: flex;
        flex-direction: row-reverse;
        padding: 10rpx 4rpx;
        view {
          width: 118rpx;
          padding: 14rpx 0;
          margin-left: 8rpx;
          font-size: 20rpx;
          color: #858585;
          text-align: center;
          border: 2rpx solid #e4e4e4;
          border-radius: 10rpx;
        }
      }
      .right_status {
        position: absolute;
        top: 0;
        right: -4rpx;
        padding: 8rpx 12rpx;
        font-size: 22rpx;
        color: #fff;
        background: linear-gradient(to bottom, #01aaff, #018fff);
        border-radius: 0 0 10rpx 10rpx;
      }
    }
  }
}
</style>
